<template>
  <view class="d-flex flex-column">
    <StatusBar></StatusBar>
    <view class="d-flex flex-column flex-grow-1" style="background-color: #f7f7f7">
      <view class="m-2 d-flex">
        <view class="col-8 d-flex justify-content-start align-items-center">
          <view class="ratio ratio-1x1" style="width: 4rem">
            <image :src="user.avtar" class="rounded-circle"/>
          </view>
          <view class="ms-1 d-flex flex-column">
            <view class="fw-bold h5">
              {{ user.name }}
            </view>
            <view class="text-secondary" style="font-size: 0.9rem">
              {{ user.id }}
            </view>
          </view>
        </view>
        <view class="col-4">
          <view class="d-flex align-items-center justify-content-center" style="width: 3rem">
            <view class="ratio" style="--bs-aspect-ratio: 150%">
              <image src="@/static/切图/我的/logo.png"/>
            </view>
          </view>
        </view>
      </view>
      <view class="mx-2 mt-2 p-2 d-flex justify-content-around align-items-center text-light rounded rounded-2"
            style="background-color: #484e66">
        <text class="h-100 ms-2 d-flex justify-content-center align-items-center h4 fw-bold" style="color: #e0c6a9">
          77卡
        </text>
        <text class="ms-2">
          一餐能省4块多，两餐回本
        </text>
        <text class="p-1 d-flex justify-content-center align-items-center rounded rounded-3"
              style="background-color: #f8ebc7; color:#52546a ">
          立即开通
        </text>
      </view>
      <WalletCpt class="mx-2 bg-body"></WalletCpt>
      <view class="mx-2 mt-4 d-flex text-light rounded rounded-2" style="background-color: #6876a1">
        <view class="ms-2 d-flex align-items-center" style="font-size: 5rem;line-height: 5rem">88</view>
        <view class="ms-3 my-2 d-flex flex-column">
          <view class="h4">立享整单88折</view>
          <view class="h6">入群一起磕综艺</view>
          <view class="px-2 bg-light rounded rounded-3" style="color: #6c77a3">群内每天红包券，抄底价秒杀</view>
        </view>
      </view>
      <view class="mx-2 mt-2 d-flex flex-wrap align-items-center bg-body">
        <view v-for="(item, index) in menuList" :key="index" @click="goto(item.path)"
              class="col-3 d-flex flex-column justify-content-center align-items-center">
          <view class="ratio ratio-1x1">
            <image :src="item.icon" class="p-3"/>
          </view>
          <text class="mt-1" style="font-size: 0.9rem">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import WalletCpt from "../component/WalletCpt.vue";
import StatusBar from "../component/StatusBar.vue";

export default {
  name: "UserSpace",
  components: {
    StatusBar,
    WalletCpt,
  },
  data() {
    return {
      user: {
        avtar: "/static/切图/首页/我的.png",
        name: "用户昵称",
        id: "1134614268"
      },
      menuList:[
        {icon:"/static/切图/我的/订单.png", name:"我的订单",path:""},
        {icon:"/static/切图/我的/拼团.png", name:"我的拼团",path:""},
        {icon:"/static/切图/我的/二维码.png", name:"兑换码",path:""},
        {icon:"/static/切图/我的/发票.png", name:"发票管理",path:""},
        {icon:"/static/切图/我的/惊喜.png", name:"暗号惊喜",path:""},
        {icon:"/static/切图/我的/手机.png", name:"修改手机号",path:""},
        {icon:"/static/切图/我的/设置.png", name:"设置",path:""},
        {icon:"/static/切图/我的/客服.png", name:"人工客服",path:""},
      ]
    }
  },
  methods: {
    goTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
  }
}
</script>

<style scoped lang="less">
</style>